<template>
  <div>
    <div id="three"></div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      option: {
        title: {
          text: '任务总览'
        },
        //    color: ["#2f89cf"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          data: ['总数', '完成率', '通过率'],
          right: '0%',
        },
        grid: {
          left: 30,
          right: 10,
          // top:50
        },
        xAxis: [
          {
            type: "category",
            data: [
              "张三",
              "李四",
              "王二",
              "小李",
              "小万",
              "小赵"
            ],
            axisTick: {
              alignWithLabel: true
            },
            axisLabel: {
              textStyle: {
                color: "rgba(0,0,0,.6)",
                fontSize: "12"
              }
            },
            axisLine: {
              show: false
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              textStyle: {
                color: "rgba(0,0,0,.6)",
                fontSize: "12"
              }
            },
            axisLine: {
              lineStyle: {
                color: "rgba(0,0,0,.1)"
                // width: 1,
                // type: "solid"
              }
            },
            splitLine: {
              lineStyle: {
                color: "rgba(0,0,0,.1)"
              }
            }
          }
        ],
        series: [
          {
            name: "总数",
            type: "bar",
            barWidth: "20%",
            data: [400, 600, 800, 400, 600, 800, 400, 600, 800],
            itemStyle: {
              color: "#9013FE",
              barBorderRadius: 5
            }
          },
          {
            name: "完成率",
            type: "bar",
            barWidth: "20%",
            data: [399, 587, 753, 398, 555, 777, 369, 599, 789],
            itemStyle: {
              color: "#BD10E0",
              barBorderRadius: 5
            }
          },
          {
            name: "通过率",
            type: "bar",
            barWidth: "20%",
            data: [390, 580, 750, 390, 550, 770, 365, 588, 780],
            itemStyle: {
              color: "#F1ACFF",
              barBorderRadius: 5
            }
          }
        ]
      }
    }
  },
  mounted () {
    this.drawLine()
  },
  methods: {
    drawLine () {
      let myChart = this.$echarts.init(document.getElementById('three'))
      window.onresize = myChart.resize
      myChart.setOption(this.option)
    }
  }
}
</script>
<style scoped>
#three {
  width: 100%;
  height: 350px;
}
</style>